<!--
 * @Author: jiangyg email@jiangyg.com
 * @Date: 2022-08-14 15:31:12
 * @LastEditors: jiangyg email@jiangyg.com
 * @LastEditTime: 2022-11-22 06:29:16
 * @FilePath: /frontend/mall-frontend/src/views/modules/admin/common/brand-select.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <el-select :placeholder="placeholder" v-model="defaultValue" @change="handleChangeEvent" filterable clearable style="width: 100%">
      <el-option v-for="item in dataList" :key="item.brandId" :label="item.brandName" :value="item.brandId"> </el-option>
    </el-select>
  </div>
</template>

<script lang="ts" setup>
import http from "@/utils/httpRequest";
import { ref, watch, onMounted } from "vue";

// 属性定义
const props = defineProps({
  modelValue: {
    type: String,
    required: true,
  },
  categoryId: {
    type: String,
    required: true,
  },
});

const dataList = ref([]);

// TODO 这个 value 可能有问题
const defaultValue = ref(props.modelValue);

const placeholder = ref("请先选择分类");

// 父级组件的自定义事件
const emit = defineEmits(['update:modelValue']);

// 监听分类的变化
watch(() => props.categoryId, (val) => {
  if (val) {
    placeholder.value = "请选择品牌";
    loadBrandData();
  }
});

// 初始化品牌下拉数据
const loadBrandData = () => {
  if (!props.categoryId) {
    return;
  }
  http
    .post({
      url: `/product/brand/relation/list`,
      data: {
        categoryId: props.categoryId,
      },
    })
    .then(({ data }) => {
      dataList.value = http.success(data) ? data.body : [];
    });
};

const handleChangeEvent = (val) => {
  emit("update:modelValue", val);
};
</script>

<style scoped>
</style>
